layui框架IE8下的兼容问题收录一

您所在的位置：网站首页 › layui 按钮显示还有多少秒可以使用 › layui框架IE8下的兼容问题收录一

layui框架IE8下的兼容问题收录一

#layui框架IE8下的兼容问题收录一| 来源: 网络整理| 查看: 265

IE8一丶兼容ie所需的一些插件及使用　　1).兼容h5新属性和标记插件 html5.min.js

　　2).兼容ajax跨域(CORS)的插件在ie报错 jquery.xdomainrequest.min.js详细介绍网址https://blog.csdn.net/weixin_39279356/article/details/81390183

　　3).兼容ie67的JSON. Stringify/ parse json2.js

使用方法：

二丶关于ajax调用

Ajax 不支持async=falseIE8，9 默认不支持 CORS 请求

解决方式:

在ajax请求前加jQuery.support.cors = true;//如果要同步请求才会遇到这行代码

需要引入jquery.xdomainrequest.min.js

Jq的ajax建议写法 $.ajax({ url: url, type: "post", async: true, data: data, cache: false, //ajax浏览器缓存机制，ie会判断如果请求过了接口后。下一次就会从缓存获取结果一直是第一次的 timeout: 120000, contentType: "application/json;", //推荐写这个 dataType: "json",

});

三、关于css样式和html

1).Css选择器 :nth-child在ie8下不兼容

通过js控制在一些插件的表格奇偶行不同背景色会有遇到。

2).Margin-bottom

在谷歌下会撑起父元素高度，下边显示空白，在ie下不会撑起父元素高度，如果需要留白可以设置高度或者padding

3).Css3媒体查询的Max/min-width 在ie8下不生效

引入respond.js

4).透明度opacity在ie不兼容

解决方法：style="cursor: default;opacity: 0;filter:alpha(opacity=0);"

5). Img 的src字符串的大小在ie8最大限制为32kb 对于一些较大的base64字符串需要进行压缩处理方式一：字写函数,但是需要用到canvas，canvas在ie8 不兼容，需要引入excanvas.js文件注意只能在head里边引入。但是使用过程中会报空指针错误暂未发现原因。方式二：后台处理可以使用

四、Echarts插件

1).Width和height不支持百分比 2).插件的问题：Echarts加了interval(默认坐标轴间隔，占不下自己隐藏)属性，X轴最后一个字体会加粗可以改为js判断字数然后截取…显示。鼠标划入事件绑定：因为echarts最后生成的是一个canvas，所以只能通过echarts自带的绑定事件，在echarts渲染完成后绑定

echartsobj.on('mouseover', function (params) {});

echartsobj.on('mouseout', function (params) {});

五、js/jq

1).Js自动去掉空格的函数trim 在ie不好使，改用jq的$.trim(value);

2). Placeholder 在ie89不兼容

解决：第一个引入插件但是会修改input的value值，对非空验证不友好

第二个手写一个span 添加点击事件获取对应的input$(input).trigger("focus")触发input自带的获取焦点和失去焦点事件

3).禁用按钮回车空格退格键代码：// 防止页面后退

$(document).on("keydown", function (event) {

var ev = event || window.event; //获取event对象 var obj = ev.target || ev.srcElement; //获取事件源 var t = obj.type || obj.getAttribute('type'); //获取事件源类型 var code = event.keyCode || event.which; //还需要判断是不是处于输入框的状态 if ((code == 13 || code == 8) && t != "password" && t != "text" && t != "textarea") { return false } }) 4).按钮禁用

　　　　给按钮绑定了click事件需求点击之后禁用

　　第一种方式使用pointer-events: none;css样式在ie下禁止不了

第二种方式使用disable属性可以生效，但是如果绑定事件是按钮的话在ie会出现重影第三种，直接用off去掉on事件(适用于每次页面仅点击一次)类似系统设置按钮

　　第四种，使用one()绑定事件

5).Input禁止编辑第一种：disabled 兼容所有浏览器

第二种：readonly可以获取焦点也能实现不可编辑但是，使用退格键的时候在ie8下回触发浏览器后退事件

6).关于dataset属性在layui下拉框的使用中，需要获取当前选中的自定义属性data-值，在使用layui文档中方法的时候用到了dataset的属性data.elem[data.elem.selectedIndex].dataset.policeid;但是在ie10获取不到这个属性解决：改用jq获取选中对象$(data.elem[data.elem.selectedIndex]).data("policeid")如果是数字的话按需求改变为字符串

Layui一、表单

1).下拉框 Layui下拉框select 在html页面必须有个option 下拉框在ie padding失效，文字和小箭头重合解决方法： if(extension.isIE89()){ $(".selectlayui-input-block").append("");

}

还有一种在生成的时候增加默认值请选择待验证

2).第一种情况：非空验证的时候input和select在ie8不会标红第二种情况：设置了disabled的input在所有浏览器也不会标红(因为获取不到焦点被阻止了)。

解决验证时候在form. verify对应的规则里边手动加上红框用settimeout设置红色边框消失时间

二、表格

1).Table查看单元格更多信息的时候，如果全是英文，在ie下会出现滚动条和多余高度，解决：给更多信息的tips增加word-wrap:break-word; overflow:hidden; 2).表头按钮的样式在ie8下的默认颜色是绿色，因为ie8不支持nth-child选择 3).表格在ie8下鼠标滑动会跟着跳动不同情况： 1,鼠标划入带有查看更多的单元格的时候，分页器会自动下移出现横向滚动条。解决方法：在table的done函数里边，给改变table的高度，获取父元素的高度。

// 鼠标在table框上移动时候高度变高

var box = $("#box_height").find(".layui-table-box") var height = $(box).find(".layui-table-body").css("height") var boxheight = parseInt(height) + 36 + "px" $(box).css("height", boxheight);

高度36可根据实际页面上下微调。

上边修改会出现新的问题，如果修改table的筛选列，因为高度不能自适应，导致横向滚动条无法显示最新解决办法

// 鼠标在table框上移动时候高度变高 changeTableHeight(); var oldtablemainheight = $(".layui-table-main").height(); //监听点击事件手动修改表格高度 $(document).on("click", function (e) { if (oldtablemainheight != $(".layui-table-main").height()) { changeTableHeight(); } })

function changeTableHeight(obj) {

var box = $("#box_height").find(".layui-table-box"); var height = $(box).find(".layui-table-body").css("height"); var boxheight = parseInt(height) + 38 + "px"; $(box).css("height", boxheight);

}

还需要增加一个window.onrisize事件，为了在切换浏览器窗口的时候宽度不够出现滚动条，还要在筛选项table.js源码也增加这个事件，筛选列改变也会影响表格宽度

4).表格表头

表头的行设置的min-height是50px;但是在ie下不会生效，高度太高，所以改成了0px，这就影响到没有表头按钮的时候，右边筛选列会和下边单元格重叠。解决：增加一个透明度为0的不可点击的按钮。透明度opacity在ie不兼容解决方法：style="cursor: default;opacity: 0;filter:alpha(opacity=0);"

5).表格隔行不变色和nth选择器有关系css在ie8不支持nth。改用jq在done回调函数里边动态修改

三、文件上传

1).上传文件的按钮和表头结合使用在table表头的按钮，上传文件后，刷新表头，按钮不起作用解决：把upload初始化写在table的done事件里面

四、富文本编辑器

1).赋值

layedit.setContent(richtext, "", false);之前不好用但是最新验证又能使用了保险起见还是更改赋值方式先给textarea复制然后在渲染

2).样式问题

编辑器提供的超链接按钮打开后按钮默认颜色是绿色解决：修改源码增加类名在相应页面增加css修改样式

3).富文本编辑器的超链接、图片和表情功能在ie使用不了。

五、时间选择器

如果给默认值的话，第一次打开选择器，选择时间的时候不会自动清除默认的时间，解决：在源码前增加个判断手动修改判断条件

时间选择器的placeholder在done事件里边添加类似下拉框的提示信息

六、树形结构

在ie8无法打开的问题：修改源码packDiv = $('

'),三元判断由空改为现在这个

弹出框按钮

在ie下弹框的按钮按照按钮顺序来判断，隐藏第一个按钮后第二个按钮会走第一个函数的回调。解决：在打开前找个数组填充按钮，先赋值再打开。树形结构的前边的字体图标在ie8下显示不全。只能通过js判断浏览器在ie8下增大font-size

七、Tab选项卡

layui选项卡和echarts结合使用，切换的时候在ie下会出现跳动情况，原因是监控window.resize()后表格会因为出现横向滚动条，导致窗口高边变化触发resize事件，然后横向滚动条消失，再次触发resize事件一直循环触发。解决：给带有类名layui-tab-content的div设置一个高度。

八、栅格系统

在ie 只有layui-col-xs xs好使

【本文地址】

公司简介

联系我们